<template>
  <div id="wrapper" class="pb-125">
  	<div class="index-header fixed-top">
      <div class="index-header-logo"><img src="~images/logo.png" class="img-responsive" alt="5173游戏交易平台"></div>
      <a @click="goSearchAll">
        <div class="index-header-search">
          <div class="text-input" >
            <span class="f30">搜索游戏</span>
          </div>
        </div>
      </a>
      <a class="toPc appGc" rel='nofollow' href="http://app.5173.com" style="right:.88rem;" title="app下载页面"><img src="~images/appgc.png"></a>
      <a class="toPc" rel='nofollow' href="http://www.5173.com/home" title="返回5173主站"><img src="~images/pc.png"></a>
    </div>

    <div class="mt-97"></div>
    <!-- banner开始 -->
     <div class="newhmban">
    <swiper class="index-banner" :options="swiperOption"
                ref="indexSwiper" v-if="bannerList.length">
      <swiper-slide v-for="item in bannerList" @click.native="goBannerUrl(item)">
        <!-- <a :href="item.bannerLinkUrl" :class="'bannerslide'+item.id"> -->
          <img :src="item.bannerImg">
        <!-- </a> -->
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
     </div>
    <!-- banner结束 -->

      <!-- 购买入口开始 -->
      <div class="index-swiper bg-fff border-bottom py-30 mb-20">
      	<div class="swiper-slide fl text-center">
          <a class="open-indicator" href="/vue/choice/buyEntry?goodsType=3" title="游戏币交易">
            <span class="class01"></span>
            <p class="f28 color-000 mt-10">游戏币</p>
          </a>
        </div>
        <div class="swiper-slide fl text-center">
          <a class="open-indicator" href="/vue/choice/buyEntry?goodsType=2" title="帐号交易">
            <span class="class02"></span>
            <p class="f28 color-000 mt-10">帐号</p>
          </a>
        </div>
        <div class="swiper-slide fl text-center">
          <a class="open-indicator" href="/vue/recharge" title="手游首充，手游代充">
            <span class="class03"></span>
            <p class="f28 color-000 mt-10">手游充值</p>
          </a>
        </div>
        <div class="swiper-slide fl text-center">
          <a class="open-indicator" href="/dl/seek-usertype.html" title="游戏代练">
            <span class="class04"></span>
            <p class="f28 color-000 mt-10">代练</p>
          </a>
        </div>
        <div class="swiper-slide fl text-center">
          <a class="open-indicator" href="/vue/choice/buyEntry?goodsType=1" title="装备交易">
            <span class="class05"></span>
            <p class="f28 color-000 mt-10">装备</p>
          </a>
        </div>
      </div>
      <!-- 购买入口结束 -->

      <!-- 热门推荐游戏列表 -->
      <div class="ind-search-game bg-fff border-top mb-20 border-bottom ">
        <div class="tab">
          <div class="tab-head">
            <ul class="tab-nav">
              <li :class="{active: selectGameType === 2}"><a @click="choiceGameType(2)"><span class="sj">热门手游</span></a></li>
              <li :class="{active: selectGameType === 1}"><a @click="choiceGameType(1)"><span class="dn">热门端游</span></a> </li>
            </ul>
          </div>
            <div class="tab-body">
              <div class="tab-panel" :class="{active: selectGameType === 1}">
                <div class="tab-class01">
                  <ul>
                    <li v-for="elem in pcHotGameList">
                      <a @click="nextPage(elem)">
                          <center><img :src="elem.gameImageUrl"></center>
                          <p class="f28 color-000">{{elem.name}}</p>
                      </a>
                    </li>
                  </ul>
                </div>
                <a href="/vue/gameList/1">
                  <div class="tab-more border-top"><a class="more f30 color-666">更多游戏</a></div>
                </a>
              </div>
              <div class="tab-panel" :class="{active: selectGameType === 2}">
                <div class="tab-class01">
                  <ul>
                    <li v-for="elem in mobHotGameList">
                      <a @click="nextPage(elem)">
                          <center><img :src="elem.gameImageUrl"></center>
                          <p class="f28 color-000">{{elem.name}}</p>
                      </a>
                    </li>
                  </ul>
                </div>
                <a href="/vue/gameList/2">
                  <div class="tab-more border-top"><a class="more f30 color-666">更多游戏</a></div>
                </a>
              </div>
            </div>
          </div>
      </div>

      <!--浏览记录-->
      <div class="index-record bg-fff mb-20 border-top border-bottom  pt-30" v-if="browseHistoryList.length">
      	<div class="record-titl f34 color-333 text-center fontbold px-30 ">浏览记录</div>
          <div class="record-conn px-30 recor-pldn">
          	<div
              v-for="item in browseHistoryList"
              @click="goSimilarity(item)"
              class="demolist border-bottom py-30" >
              	<div class="mbgmes-img fl mt-10">
                  	<img v-if="(!item.goods_img&&!item.goodsImg)||(item.goodsImg?item.goodsImg.includes('null'):false)||(item.goods_img?item.goods_img.includes('null'):false)" src="~images/default_img.jpg" />
                    <img v-else :src="item.goods_img||item.goodsImg">
                    <div class="img_bj bg-000"></div>
                    <div class="img-text f24 color-fff text-center">游戏帐号</div>
                  </div>
                  <div class="mbgmes-con-index">
                      <div class="mbl-title f32 color-000">{{item.title}}</div>
                      <div class="mbl-cper ">
                          <div class="mbl-money color-m1 f30 fl">￥{{item.price}}</div>
                          <div class="mbl-icon fr">
                            <i class="zhao" v-if="item.isFindPrice"></i>
                            <i class="mai" v-if="item.isSellerSafe"></i>
                            <i class="shang" v-if="item.isGoodsInsurance"></i>
                            <i class="an" v-show="item.is_axm||item.axm"></i>
                            <i class="tu" v-show="item.is_robot_capture||item.robotCapture"></i>
                          </div>
                      </div>
                      <div class="mbl-parea color-666 f26">
                        <span class="fr f24 color-666 text-center border" @click.stop="similarity(item)">看相似</span>
                        <p class="fl mbl-qfu">
                          {{item.game_name||item.gameName}}/{{item.region_name||item.regionName}}/{{item.server_name||item.serverName}}
                        </p>
                      </div>
                  </div>
                  <div class="sell-out" v-if="showSellOut&&!item.groundingStatue&&islogin"></div>
              </div>
          </div>
          <a v-if="browseHistoryList.length==3" href="/vue/browsing-history/history-lists">
            <div class="tab-more border-top" >
              <a class="more f30 color-666">更多浏览记录</a>
            </div>
          </a>
      </div>

      <!--热门推荐-->
      <hotRecommend></hotRecommend>
      <!-- app下载入口 -->
      <div class="appDownload" v-if="appPacket">
          <div class="appDownloadBox">
            <span @click="appPacket = false"></span>
            <a class="appBox" rel='nofollow' href="http://app.5173.com" title="app下载页面">
              <img src="~images/gcapp.png">
            </a>
          </div>
        </div>
      <!--验证中心-->
      <customerServiceVerification></customerServiceVerification>
        <!-- <div class="hb-activity-box" v-if="hb"> -->
            <!--关闭活动提示-->
            <!-- <i class="hb-icon-close" @click="closeHB()"></i> -->
            <!--下载app按钮-->
            <!-- <a class="hb-download-btn" href="http://app.5173.com/download/Store"></a> -->
        <!-- </div> -->
        <!-- <div class="maskdiv" v-if="hb"></div> -->

      <!--问题反馈-->
      <div class="index-feedback bg-fff border-bottom border-top">
      	<div class="fdback-titl text-center f34 color-333 fontbold border-bottom">问题反馈</div>
      	<div class="fdback-conn">
        	<ul>
            <a href="http://sc.5173.com/?question/ask/41.html">
            	<li class="fl border-right"><span class="zhix f28 color-666">咨询</span></li>
            </a>
            <a href="http://sc.5173.com/?question/complain/41.html">
              <li class="fl border-right"><span class="tous f28 color-666">投诉</span></li>
            </a>
            <a href="http://sc.5173.com/?question/suggest/41.html">
              <li class="fl"><span class="jiany f28 color-666">建议</span></li>
            </a>
          </ul>
        </div>
      </div>
      <MessageComponent @touchmove.prevent></MessageComponent>
      <!-- foot lock -->
      <footerComponent :active="'home'"></footerComponent>
  </div>
</template>
<script>
import {mapState, mapGetters, mapActions} from 'vuex';
import footerComponent from './Footer'
import MessageComponent from 'components/common/MessageComponent.vue'
import customerServiceVerification from 'components/common/CustomerServiceVerification'
import hotRecommend from 'components/common/HotRecommend'
import {HomeApi} from 'api/home'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data() {
    return {
	   hb:false,
      swiperOption: {
         /** notNextTick是一个组件自有属性，如果notNextTick设置为true，
         * 组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，
         * 假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
         */
         notNextTick: true,
         // swiper configs 所有的配置同swiper官方api配置
         autoplay: 3000,
         direction : 'horizontal',
         grabCursor : true,
         setWrapperSize :true,
         autoHeight: true,
         loop: true,
         pagination : '.swiper-pagination',
         paginationClickable :true,
         mousewheelControl : false,
         observeParents:true,
         //用户操作了swiper是否禁止自动播放
         autoplayDisableOnInteraction: false,
         // swiper callbacks
         // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
         //  onTransitionStart(swiper){
         //    console.log(swiper)
         //  },
         // more Swiper configs and callbacks...
         // ...
       },
      bannerList: [],
      mobHotGameList: [],
      pcHotGameList: [],
      selectGameType: 2,
      browseHistoryList: [],
      hotRecommendList: [],
      showSellOut: false,
      appPacket: true
    }
  },
  components: {
    customerServiceVerification,
    footerComponent,
    MessageComponent,
    hotRecommend,
    swiper,
    swiperSlide
  },
  computed: {
    ...mapState({
      islogin: state => {
        return state.common.isLogin
      },
      accountInfo: state => {
        return state.common.accountInfo
      }
    }),
  },
  created() {
	  this.$http.post(this.$CONSTANTS.APISearchCenter + 'OnoffService/selectOnoff', {"mapRequest": {"type": "红包开关"}})
		  .then((res) => {
              var data = res.body;
              if(data.success&&data.result.status){
	              this.hb = true;
	              if (this.$isLocalStorageSupported()) {
		              this.hb =  sessionStorage.getItem("hb")?false:true
	              }
              }
		  })
		  .catch(function (res) {
			  console.log(res)
		  });
    //获取缓存选择的游戏类型
    this.getGameType()
    //获取浏览记录
    this.getBrowseHistory()
    this.getHotGameList()
    this.getBannerList()
    this.getislogin()
  },
  watch: {
    islogin(val) {
      if (val) {
        this.getBrowseHistory()
      }
    }
  },
  methods: {
	  closeHB(){
		  this.hb = !this.hb
		  if (this.$isLocalStorageSupported()) {
			  sessionStorage.setItem("hb",   true)
          }
	  },
    goSimilarity(item){
      item.gameType = item.gameType||item.game_type
      let goods_source_type = item.goodsSource ? item.goodsSource : 0
      if(item.goodsId){
        // 手游和端游详情页分离
        if (Number(item.gameType) === 1) {  // 1是端游 2是手游
          location.href = "/vue/account/accountDetail/"+item.goodsId+"/"+goods_source_type+"/"+1
        }else{
          // 注释保留 2018.4.1 yanjd@0.0.2
          // location.href = "/vue/mobile-game/account-detail/"+item.goodsId+"/"+goods_source_type
          if (goods_source_type == 1) {
            location.href = "/vue/mobile-game/account-detail-new/"+item.goodsId+"/"+goods_source_type
          } else {
            location.href = "/vue/mobile-game/account-detail/"+item.goodsId+"/"+goods_source_type
          }
        }
      }else{
        if (Number(item.gameType) === 1) {  // 1是端游 2是手游
          location.href = "/vue/account/accountDetail/"+item.id+"/"+goods_source_type+"/"+1
        }else{
          // 注释保留 2018.4.1 yanjd@0.0.2
          // location.href = "/vue/mobile-game/account-detail/"+item.id+"/"+goods_source_type
          if (goods_source_type == 1) {
            location.href = "/vue/mobile-game/account-detail-new/"+item.id+"/"+goods_source_type
          } else {
            location.href = "/vue/mobile-game/account-detail/"+item.id+"/"+goods_source_type
          }
        }
      }
    },
    getBannerList() {
      HomeApi.SelectBanner().then(
        res => {
          if (res.ok&&res.data.data) {
            this.bannerList = res.data.data
          }
        },
        err => {
          console.log(err);
        }
      )
    },
    getHotGameList() {
      HomeApi.HotGame({pageSize:8,pageIndex:1,gameType:1,firstPY:"HOT"}).then(
        res => {
          if (res.ok&&res.data.data) {
            this.pcHotGameList = res.data.data
          }
        },
        err => {
          console.log(err);
        }
      )
      HomeApi.HotGame({pageSize:8,pageIndex:1,gameType:2,firstPY:"HOT"}).then(
        res => {
          if (res.ok&&res.data.data) {
            this.mobHotGameList = res.data.data
          }
        },
        err => {
          console.log(err);
        }
      )
    },
    //搜索跳转
    goSearchAll: function () {
      this.$router.push({
        name: "SearchAll",
        query: {type: 'special'}
      })
    },
    //轮播图片链接跳转
    goBannerUrl(item) {
      this.$http.get(this.$CONSTANTS.P30006+'HomePageBanner/bannerClickVolume', {params: {id:item.id,bannerLinkUrl:item.bannerLinkUrl}}).then(res => {
        if (res.data.success) {
          location.href = item.bannerLinkUrl
        }
      })
    },
    choiceGameType(gameType) {
      this.selectGameType = gameType
      this.setGameType()
    },
    setGameType(){
      if (this.$isLocalStorageSupported()) {
        sessionStorage.setItem("homeGameType", JSON.stringify(this.selectGameType));
      }
    },
    getGameType(){
      if (this.$isLocalStorageSupported() && JSON.parse(sessionStorage.getItem("homeGameType"))) {
        this.selectGameType = parseInt(sessionStorage.getItem("homeGameType"));
      }
    },
    nextPage(elem) {
      if (this.$isLocalStorageSupported()&&elem.type==2) {
        let obj = {
          gameId: elem.catagoryId,
          gameName: elem.name,
          gameType: elem.type,
          goodsType: '2',
          typeName: '游戏帐号',
        }
        this.$saveBrowseHistory(obj)
      }else{
        let obj = {
          gameId: elem.catagoryId,
          gameName: elem.name,
          gameType: elem.type,
        }
        this.$saveBrowseHistory(obj)
      }
      if (this.selectGameType === 1) {
        //端游
        location.href = `/vue/search-all-app/search-class?gid=${elem.catagoryId}&gname=${elem.name}&gameType=1&type=special`
      } else if (this.selectGameType === 2) {
        //手游
        if (_hmt) _hmt.push(['_trackPageview', `/vue/mobile-game/goods-list2/${elem.catagoryId}/${elem.name}/2`]);
        location.href = `/vue/mobile-game/goods-list2/${elem.catagoryId}/${elem.name}/2`
      }
    },
    getBrowseHistory() {
      if (!this.accountInfo) {
        if (this.$isLocalStorageSupported() && localStorage.getItem('history')) {
          this.browseHistoryList = JSON.parse(localStorage.getItem('history')).slice(0,3)
        }
      } else {
          this.$http.post(
            this.$CONSTANTS.APIGoods+'goodsBrowseHistory/addJsonBrowseList',
            {
              userId:this.accountInfo.pcUserId,
              jsonBrowse:localStorage.getItem('history'),//发布单编号
            }).then(()=>{}).then(
              res=>{
                this.$http.post(this.$CONSTANTS.APIGoods+'goodsBrowseHistory/browseHistoryList',
              {
                userId:this.accountInfo.pcUserId ,
                page:1,
                pageSize:21
              }).then(res=>{
              if(res.data.success){
                this.showSellOut = true
                this.browseHistoryList =  res.body.goodsBrowseList.filter(x=>x.groundingStatue).slice(0,3);
              }
            })
          })
      }
    },
    similarity(item) {
	  item.goodsId = item.goodsId||item.id
      item.goodsImg = item.goodsImg||item.goods_img
      this.$router.push(
        {
          name:'historySimilarity',
          query:{
            goodsId:item.goodsId,
            gameType:item.gameType,
            totalMessage:JSON.stringify(item)
          }
        }
      )
    },
    isFirst: function () {
        var date = new Date;
        var nowDate = date.getDate();

        if (!this.$isLocalStorageSupported()) {
            this.first = true;
        }
        else if (localStorage.getItem('first') && nowDate == parseInt(localStorage.getItem('first'))) {
            this.first = false;
        } else {
            setTimeout(() => {
                this.first = false;
            }, 10000);
            localStorage.setItem('first', nowDate);
        }
    },
    ...mapActions({
      getislogin: 'common/COMMON_ISLOGIN'
    }),
  }
}
</script>
<style src="css/common/index.css" ></style>
<style src="css/plugin/swiper.css" ></style>
<style scoped>
.swiper-slide {
  text-align: center;
}
.swiper-slide img {
  width: 100% !important;
  height: auto !important;
}
.swiper-container {
  width: 100%;
  background: #000;
}

</style>
<style>
.swiper-pagination-bullet {
  opacity: .45;
  background: #000;
}
.swiper-pagination-bullet-active {
  background: #fff !important;
  opacity: 1 !important;
}
.newhmban .swiper-container .swiper-pagination-bullet{opacity:0.6;}
.newhmban .swiper-container .swiper-pagination{ margin-right:0;  width:100%; background:none; right:auto;opacity:1;  left:auto; border-radius:100%;  line-height:0rem;  bottom: .2rem; }
.newhmban .swiper-wrapper{ width: 100%; height: auto; line-height:normal;  }
</style>
